<!DOCTYPE html>
<html>
  <head>
    <title>Page Two</title>
    <script src="karate.js"></script>   
    <script>
      function result(r){ karate.setHtml('eg03Result', r.tagName) }
    </script>  
  </head>
  <body>
    <div id="eg01">
      <div class="eg01Cls" style="background-color: yellow"><span>Class Locator Test</span></div>
    </div>
    <div id="eg02">
      <a href="#" onclick="alert('this is an alert')">Show Alert</a><br/>
      <a href="#" onclick="karate.setHtml('eg02DivId', confirm('this is a confirm') ? 'OK' : 'Cancel')">Show Confirm</a><br/>
      <a href="#" onclick="karate.setHtml('eg02DivId', prompt('this is a prompt'))">Show Prompt</a><br/>
      <a href="page-03">Go to Page Three</a>
      <a href="page-03" target="_blank">New Tab</a>
      <div id="eg02DivId"></div>
    </div>
    <div id="eg03">
      <div id="eg03Result"></div>
      <a href="#" onclick="result(this)">
        Click Me
      </a>
      <p onclick="result(this)"> Click Me </p>
      <span onclick="result(this)">
        Click Me   </span>
      <button onclick="result(this)">Click Me</button>
      <div onclick="result(this)">Click Me</div>
      <span>
        <a href="#" onclick="result({ tagName: 'NESTED' })">
          Click Me  
          
        </a>
      </span>
      <div onclick="result({ tagName: 'SECOND' })">
        
        Click Me
      </div>
    </div>
    <div id="eg04">
      <ol><li><button onclick="result({ tagName: 'ITEM1' })">Item</button></li><li><button onclick="result({ tagName: 'ITEM2' })">Item</button></li></ol>
    </div>
  </body>
</html>